<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>机型管理</title>
    <meta name="ctx" th:content="${#httpServletRequest.getContextPath()}"/>
    <link rel="stylesheet" th:href="@{/css/admin/base-v2.css}">
    <link rel="stylesheet" th:href="@{/lib/font-awesome/4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/admin/app.css}">
    <link rel="stylesheet" th:href="@{/lib/daterangepicker/daterangepicker.css}">
</head>

<body>

<div class="app-page" v-cloak id="app">
    <div class="app-page-content">
        <div class="app-card">
            <div class="app-card-body">
                <div class="app-card-body-con">

                    <form class="filter">
                        <div class="filter-group">
                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label"><label>终端型号</label></div>
                                    <div class="body">
                                        <input type="text" placeholder="请输入终端型号,模糊匹配" name="deviceModel">
                                    </div>
                                </div>
                            </div>
                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label"><label>主板型号</label></div>
                                    <div class="body">
                                        <input type="text" placeholder="请输入主板型号,模糊匹配" name="mainboard">
                                    </div>
                                </div>
                            </div>
                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label"><label>品牌名称</label></div>
                                    <div class="body">
                                        <input type="text" placeholder="请输入品牌名称,模糊匹配" name="brand">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="filter-group">
                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label"><label>4G接口功能</label></div>
                                    <div class="flex1">
                                        <select id="isExist4G" name="isExist4G">
                                            <option value="">全部</option>
                                            <option value="1">有</option>
                                            <option value="0">无</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="filter-item"></div>
                            <div class="filter-item" style="justify-content: flex-end; margin-right: 0">
                                <div class="z-btn-group">
                                    <a class="z-btn z-primary" @click="initData(1,10)">查询</a>
                                </div>
                            </div>
                            <div style="display: none">
                                <input name="pageNum" th:value="${pageNum}">
                                <input name="pageSize" th:value="${pageSize}">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="app-card">
            <div class="app-card-body">
                <div class="app-card-body-con">

                    <div class="z-btn-group">
                        <button class="j-btn-control z-btn z-primary btn-add">新建</button>
                        <a class="btn-batch-delete j-btn-control z-btn z-default" @click="batchDelete()">批量删除</a>
                        <a class="btn-export j-btn-control z-btn z-default" @click="doExport()">导出</a>
                    </div>

                    <table class="z-table">
                        <thead>
                        <th>
                            <input type="checkbox" class="input" @click="onCheckboxAll" v-model="checkboxAll">
                        </th>
                        <th>终端型号</th>
                        <th>品牌</th>
                        <th>录入时间</th>
                        <th>主板</th>
                        <!--<th>屏幕类型</th>-->
                        <!--<th>屏幕尺寸</th>-->
                        <th>分辨率</th>
                        <!--<th>屏接口</th>-->
                        <!--<th>蓝牙</th>-->
                        <th>4G接口功能</th>
                        <!--<th>USB接口数</th>-->
                        <!--<th>串口数</th>-->
                        <!--<th>备注</th>-->
                        <th>操作</th>
                        </thead>
                        <tbody>
                        <tr v-for="deviceModel in deviceModelList"
                            :data-id="deviceModel.deviceModelId"
                            :data-device-model="deviceModel.deviceModel"
                            :data-brand="deviceModel.brand"
                            :data-mainboard="deviceModel.mainboard"
                            :data-screen-type="deviceModel.screenType"
                            :data-screen-size="deviceModel.screenSize"
                            :data-screen-resolution="deviceModel.screenResolution"
                            :data-screen-interface="deviceModel.screenInterface"
                            :data-blue-tooth="deviceModel.bluetooth"
                            :data-four-g-interface-number="deviceModel.fourGInterfaceNumber"
                            :data-usb-interface-number="deviceModel.usbInterfaceNumber"
                            :data-serial-port-number="deviceModel.serialPortNumber"
                            :data-remark="deviceModel.remark">
                            <td><input type="checkbox" class="input j-checkbox"  v-model="deviceModel.checkbox"></td>
                            <td><span>{{deviceModel.deviceModel}}</span></td>
                            <td><span>{{deviceModel.brand}}</span></td>
                            <td><span>{{deviceModel.addTime}}</span></td>
                            <td><span>{{deviceModel.mainboard}}</span></td>
                            <!--<td><span>{{deviceModel.screenType}}</span></td>-->
                            <!--<td><span>{{deviceModel.screenSize}}</span></td>-->
                            <td><span>{{deviceModel.screenResolution}}</span></td>
                            <!--<td><span>{{deviceModel.screenInterface}}</span></td>-->
                            <!--<td><span>{{deviceModel.bluetooth}}</span></td>-->
                            <td><span>{{deviceModel.fourGInterfaceNumberShow}}</span></td>
                            <!--<td><span>{{deviceModel.usbInterfaceNumber}}</span></td>-->
                            <!--<td><span>{{deviceModel.serialPortNumber}}</span></td>-->
                            <!--<td><span>{{deviceModel.remark}}</span></td>-->
                            <td class="btn-group">
                                <a class="btn-edit" data-title="编辑"  @click="showEdit(deviceModel)">编辑</a>
                                <a class="btn-delete" data-title="删除" @click="showDelete(deviceModel)">删除</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>

                    <!-- 分页 -->
                    <div class="app-card-body">
                        <div class="table-info z-pat z-fl">
                            总计：<p class="total">{{total}}</p>
                        </div>
                        <!-- 前端分页 -->
                        <div class="pagination z-pat z-fr"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 新增 -->
    <div class="popup-add popup-default z-popup z-fixed z-df z-flex-cc z-hide">
        <div class="bg" data-popup-close></div>
        <div class="body">
            <div class="title">新建机型</div>
            <div class="content">
                <form>
                    <input type="hidden" name="deviceModelId" data-name="终端型号ID">
                    <div class="form-item row">
                        <div class="label">
                            <label>终端型号</label>
                        </div>
                        <div class="body">
                            <input type="text" name="deviceModel" data-name="终端型号" data-rule="required">
                        </div>
                    </div>
                    <div class="form-item row">
                        <div class="label">
                            <label>品牌</label>
                        </div>
                        <div class="body">
                            <input type="text" name="brand" data-name="品牌" data-rule="required">
                        </div>
                    </div>
                    <div class="form-item row">
                        <div class="label">
                            <label>主板</label>
                        </div>
                        <div class="body">
                            <input type="text" name="mainboard" data-name="主板" data-rule="required">
                        </div>
                    </div>
                    <div class="form-item row">
                        <div class="label">
                            <label>屏幕类型</label>
                        </div>
                        <div class="body">
                            <select name="screenType" data-rule="required">
                                <option value="1">单屏</option>
                                <option value="2">双屏</option>
                                <option value="3">三屏</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-item row">
                        <div class="label">
                            <label>屏幕尺寸</label>
                        </div>
                        <div class="body">
                            <input type="text" name="screenSize" data-name="屏幕尺寸" data-rule="required">
                        </div>
                    </div>
                    <div class="form-item row">
                        <div class="label">
                            <label>屏幕分辨率</label>
                        </div>
                        <div class="body">
                            <input type="text" name="screenResolution" data-name="屏幕分辨率" data-rule="required">
                        </div>
                    </div>
                    <div class="form-item row">
                        <div class="label">
                            <label>屏接口</label>
                        </div>
                        <div class="body">
                            <input type="text" name="screenInterface" data-name="屏接口" data-rule="required">
                        </div>
                    </div>
                    <div class="form-item row">
                        <div class="label">
                            <label>蓝牙</label>
                        </div>
                        <div class="body">
                            <select name="bluetooth" data-rule="required">
                                <option value="0">无</option>
                                <option value="1">有</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-item row">
                        <div class="label">
                            <label>4G接口功能</label>
                        </div>
                        <div class="body">
                            <select name="fourGInterfaceNumber" data-rule="required">
                                <option value="0">无</option>
                                <option value="1">有</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-item row">
                        <div class="label">
                            <label>USB接口数</label>
                        </div>
                        <div class="body">
                            <select name="usbInterfaceNumber" data-rule="required">
                                <option value="0">无</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                                <option value="10">10</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-item row">
                        <div class="label">
                            <label>串口数</label>
                        </div>
                        <div class="body">
                            <select name="serialPortNumber" data-rule="required">
                                <option value="0">无</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                                <option value="10">10</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-item row">
                        <div class="label">
                            <label>备注</label>
                        </div>
                        <div class="body">
                            <input type="text" name="remark" data-name="备注" maxlength="200">
                        </div>
                    </div>
                </form>
                <div class="z-btn-group">
                    <a class="btn-submit z-btn z-primary">确定</a>
                    <a class="z-btn z-default" data-popup-close>取消</a>
                </div>
            </div>
        </div>
    </div>

    <div class="popup-edit popup-default z-popup z-fixed z-df z-flex-cc z-hide">

    </div>

</div>

<script th:src="@{/lib/jquery.min.js}"></script>
<script th:src="@{/lib/layer-v3.1.1/layer/layer.js}"></script>
<script th:src="@{/js/popup.js}"></script>
<script th:src="@{/js/form.js}"></script>
<script th:src="@{/js/admin/app.js}"></script>
<script th:src="@{/js/pagination.js}"></script>
<script th:src="@{/lib/daterangepicker/moment.min.js}"></script>
<script th:src="@{/lib/daterangepicker/daterangepicker.js}"></script>
<script th:src="@{/lib/vue/v2.5.16/vue.min.js}"></script>
<script th:src="@{/js/prompt.js}"></script>
<script>

    //获取context path
    var context = $("meta[name='ctx']").attr("content");

    // 使用vue渲染页面
    var app = new Vue({
        el: '#app',
        data: {
            deviceModelList: [],
            total:0,
            checkboxAll: false,
        },
        methods: {
            onCheckboxAll: function () {
                var deviceModelList = this.deviceModelList;

                var checkboxAll = this.checkboxAll;
                deviceModelList.map(function (item) {
                    item.checkbox = !checkboxAll;
                })

                this.deviceModelList = [...deviceModelList
            ]
                ;
            }
        }
    });

    // 初始化分页控件（分页默认参数）
    var pagination = new Pagination(".pagination", {
        pageIndex:1, // 初始化页数
        pageSize:10, // 初始化每页条数
        count:10, // 初始化总记录数（这样写相当于页面首次初始化加载时就展示了第一页）
        maxButtonCount: 5, // 分页按钮数量(可选)
        // 分页切换事件
        onPageChanged: function (pageIndex) { // 切换到指定分页
            initData(pageIndex, 10);
        }
    })
    $(function () {
        eventEmit();
        initData(1,10);
    })


    // 从URL加载搜索数据
    $(".filter").formLoad(App.query);

    // 后台渲染分页 - 补全url参数(后台传参可以忽略)
    $(".z-page a").each(function () {
        $(this).attr("href", $(this).attr("href") + location.search)
    });

    function eventEmit() {
        // 新增 - 弹窗打开
        $('.btn-add').click(function () {
            popup.open('.popup-add')
        })
    }

        var showEdit=function(data){
        // 修改 - 弹窗打开
            //取值
            var deviceModelId = data.deviceModelId;
            App.ajax({
                type: "POST",
                url: context + "/deviceModel/getDeviceModelById",
                data: {
                    deviceModelId: deviceModelId
                },
                async: false,
                success: function (obj) {
                    console.log(obj);
                    var code = obj.code;
                    if (code == 0 && obj.data) {
                        $('.popup-edit').html($('.popup-add').html()).find('.title').text('编辑');
                        $('.popup-edit').formLoad({
                            deviceModelId: obj.data.deviceModelId,
                            deviceModel: obj.data.deviceModel,
                            brand: obj.data.brand,
                            mainboard: obj.data.mainboard,
                            screenType: obj.data.screenType,
                            screenSize: obj.data.screenSize,
                            screenResolution: obj.data.screenResolution,
                            screenInterface: obj.data.screenInterface,
                            fourGInterfaceNumber: obj.data.fourGInterfaceNumber,
                            usbInterfaceNumber: obj.data.usbInterfaceNumber,
                            serialPortNumber: obj.data.serialPortNumber,
                            bluetooth: obj.data.bluetooth,
                            remark: obj.data.remark
                        })
                        //获取上级部门选择列表
                        popup.open('.popup-edit');
                    } else {
                        popup.tipsTop('机型不存在或已被删除', 'warning');
                    }
                }
            });
        }


    // 获取表格中选择的ID
    function getSelecteId() {
        let temp = [];
        $('tbody [type="checkbox"]').each(function (index, element) {
            if (element.checked == true) {
                temp.push($(this).parents('tr,.tr').data('id'));
            }
        })

        return temp.join(',');
    }

    // 新增机型保存
    var form = $(".popup-add form").form({
        submitSelector: ".popup-add .btn-submit",
        msg: function (msg) {
            popup.tipsTop(msg, 'warning');
        },
        submit: function () {
            var data = {};
            $.each($(".popup-add form").serializeArray(), function (index, field) {
                if (data[field.name]) {
                    data[field.name] += "," + field.value;
                } else {
                    data[field.name] = field.value;
                }
            })
            App.ajax({
                type: "POST",
                url: context + "/deviceModel/addDeviceModel",
                data: data,
                success: function (obj) {
                    console.log(obj);
                    var code = obj.code;
                    if (code == 0) {
                        popup.tipsTop(obj.msg, 'success');
                        setTimeout(function () {
                            window.location.href = context + "/deviceModel/listByPage";
                        }, 1000);
                    } else {
                        popup.tipsTop(obj.msg, 'warning');
                    }
                }
            })
        }
    })

    // 修改 - 弹窗确定
    var form = $(".popup-edit form").form({
        submitSelector: ".popup-edit .btn-submit",
        msg: function (msg) {
            popup.tipsTop(msg, 'warning');
        },
        submit: function () {
            var data = {};
            $.each($(".popup-edit form").serializeArray(), function (index, field) {
                if (data[field.name]) {
                    data[field.name] += "," + field.value;
                } else {
                    data[field.name] = field.value;
                }
            })

            console.log(data);

            //修改
            App.ajax({
                type: "POST",
                url: context + "/deviceModel/updateDeviceModel",
                data: data,
                success: function (obj) {
                    var code = obj.code;
                    if (code == 0) {
                        popup.tipsTop(obj.msg, 'success');
                        setTimeout(function () {
                            window.location.href = context + "/deviceModel/listByPage";
                        }, 1000);
                    } else {
                        popup.tipsTop(obj.msg, 'warning');
                    }
                }
            })
        }
    })

    // 批量删除
    var batchDelete=function(){
        var id = getSelecteId();
        if (id != '') {
            myConfirm('确认是否批量删除',function(){
                console.log(id);
                App.ajax({
                    type: "POST",
                    url: context + "/deviceModel/batchDeleteDeviceModel",
                    data: {
                        deviceModelIds: id
                    },
                    success: function (obj) {
                        var code = obj.code;
                        if (code == 0) {
                            popup.tipsTop(obj.msg, 'success');
                            setTimeout(function () {
                                window.location.href = context + "/deviceModel/listByPage";
                            }, 1000);
                        } else {
                            popup.tipsTop(obj.msg, 'warning');
                        }
                    }
                })
            });
        } else {
            popup.tipsTop("请选择需要删除的机型", 'warning');
        }
    }

    //检查参数
    function isBlank(param) {
        if (undefined === param) {
            return true;
        }
        if (null == param) {
            return true;
        }
        if ("" === param) {
            return true;
        }
        return false;
    }

    function createParamStr(pageIndex, pageSize) {
        var deviceModel= $("input[name='deviceModel']").val();
        var mainboard = $("input[name='mainboard']").val();
        var  brand = $("input[name='brand']").val();
        var isExist4G = $("select[name='isExist4G']").val();

        var url = "";
        if (!isBlank(deviceModel)) {
            url = url + "&deviceModel=" + deviceModel;
        }
        if (!isBlank(mainboard)) {
            url = url + "&mainboard=" + mainboard;
        }
        if (!isBlank(brand)) {
            url = url + "&brand=" + brand;
        }
        if (!isBlank(isExist4G)) {
            url = url + "&isExist4G=" + isExist4G;
        }
        console.log(url);
        return url;
    }

    // 导出
    var doExport = function () {
        var url = context + "/deviceModel/export";
        var paramStr = createParamStr("", "");
        if (paramStr !== "") {
            paramStr = paramStr.substring(1);
            url = url + "?" + paramStr;
        }
        window.location.href = url;
    }


    // 删除
    var showDelete=function(data){
        myConfirm('确认是否删除',function() {
            App.ajax({
                type: "POST",
                url: context + "/deviceModel/batchDeleteDeviceModel",
                data: {
                    deviceModelIds: data.deviceModelId
                },
                success: function (obj) {
                    var code = obj.code;
                    if (code == 0) {
                        popup.tipsTop(obj.msg, 'success');
                        setTimeout(function () {
                            window.location.href = context + "/deviceModel/listByPage";
                        }, 1000);
                    } else {
                        popup.tipsTop(obj.msg, 'warning');
                    }
                }
            })
        });
    }

    /**
     * 加载数据
     * @param currentPage
     * @param pageSize
     */
    var initData = function (loadPageNum, loadPageSize) {
        var params = {
            pageNum: loadPageNum,
            pageSize: loadPageSize,
            deviceModel: $("input[name='deviceModel']").val(),
            mainboard: $("input[name='mainboard']").val(),
            brand: $("input[name='brand']").val(),
            isExist4G: $("select[name='isExist4G']").val()
        };
        App.ajax({
            type: "POST",
            url: context + "/deviceModel/listdata",
            data: params,
            success: function (obj) {
                var code = obj.code;
                if (code == 0) {
                    //首先清空
                    app.deviceModelList = [];
                    var data = obj.data;
                    var totalCount = obj.data.total;
                    app.total = totalCount;
                    var html = [];
                    for (var i = 0; i < data.list.length; i++) {
                        var item = data.list[i];
                        app.deviceModelList.push(item);
                    }
                    renderPage(totalCount, loadPageNum, loadPageSize);
                }
            }
        })
    }

    /**
     * 渲染分页控件化分页
     * @param totalCount
     * @param loadPageIndex
     * @param loadPageSize
     */
    var renderPage = function (totalCount, loadPageIndex, loadPageSize) {
        // 控件参数动态替换
        pagination.options.pageIndex = loadPageIndex;
        pagination.options.pageSize= loadPageSize;
        pagination.options.count= totalCount;
        pagination.render();
    }

</script>
</body>

</html>